<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    代码执行和浏览器的交互方式(Code execution and browser interaction methods)
  </title>
  <!-- 
  JavaScript 是一种广泛使用的编程语言，主要用于网页开发。它在浏览器中的执行和与浏览器的交互方式是前端开发的核心。以下是对这些概念的详细总结：

  1. JavaScript 执行环境
  - 定义：JavaScript 主要在浏览器中执行，浏览器为其提供了运行环境。
  - 浏览器引擎：
    - 每个浏览器都有自己的 JavaScript 引擎，例如：
      - Chrome：V8 引擎
      - Firefox：SpiderMonkey
      - Safari：JavaScriptCore

  2. 执行模型
  - 单线程模型：
    - JavaScript 是单线程的，意味着同一时间只能执行一个任务。
    - 通过事件循环（Event Loop）机制来处理异步操作。

  3. 事件循环（Event Loop）
  - 定义：事件循环是 JavaScript 处理异步操作的机制。
  - 工作原理：
    - 当调用栈为空时，事件循环会检查消息队列是否有待处理的任务。
    - 如果有，则将其推入调用栈中执行。

  4. 异步编程
  - 回调函数：
    - 通过回调函数来处理异步操作，例如 AJAX 请求完成后执行的函数。
  fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data)); // 回调函数
  - Promise：
    - Promise 对象代表异步操作的最终完成（或失败）及其结果值。
    - 使用  `.then()`  和  `.catch()`  方法处理成功和失败的情况。
    let myPromise = new Promise((resolve, reject) => {
      // 异步操作
    });

    myPromise
      .then(result => console.log(result))
      .catch(error => console.error(error));
  - async/await：
    - async/await 是基于 Promise 的语法糖，使异步代码更易读。
      async function fetchData() {
      try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }

  5. DOM 操作
  - 定义：文档对象模型（DOM）是浏览器中表示 HTML 文档的对象模型。
  - 与 JavaScript 的交互：
    - JavaScript 可以通过 DOM API 操作网页元素，例如修改内容、样式和结构。
  document.getElementById('myElement').innerText = '新内容'

  6. 事件处理
  - 定义：事件是用户与网页交互的方式，例如点击、输入等。
  - 事件监听：
    - 使用  `addEventListener`  方法为元素添加事件监听器。
  document.getElementById('myButton').addEventListener('click', function() {
      alert('按钮被点击了！');
    })
  
  ============================================================================

  7. alert函数 - alert("Hello World");

  8. confirm函数 - confirm("你确定要删除吗？");

  9. prompt函数 - prompt("请输入你的名字：");

  10. console.log函数 - console.log("Hello World!");

  11. console.error函数 - console.error("这是一个错误信息。");

  12. console.warn函数 - console.warn("这是一个警告信息。");

  13. console.table函数 - console.table([{name: 'Alice', age: 25}, {name: 'Bob', age: 30}]);

  14. console.group函数 - console.group('用户信息');
      console.log('姓名：Alice');
      console.log('年龄：25');
      console.groupEnd();

  15. console.time函数 - console.time('计时器');

  16. console.timeEnd函数 - console.timeEnd('计时器');

  17. console.clear函数 - console.clear();

  18. console.assert函数 - console.assert(false, '这是一个断言错误。');

  19. console.count函数 - console.count('计数器');

  20. console.dir函数 - console.dir(document.body);

  21. console.dirxml函数 - console.dirxml(document.body);

  22. console.trace函数 - console.trace();

  23. console.profile函数 - console.profile('性能分析器');

  24. console.profileEnd函数 - console.profileEnd('性能分析器');

  25. console.timeLog函数 - console.timeLog('计时器');

  26. document.write函数 - document.write("Hello World!");

  27. document.writeln函数 - document.writeln("Hello World!");

  总结
  - 执行环境：JavaScript 在浏览器中执行，由浏览器引擎提供支持。
  - 单线程模型：JavaScript 采用单线程模型，通过事件循环处理异步操作。
  - 异步编程：使用回调函数、Promise 和 async/await 处理异步操作。
  - DOM 操作：JavaScript 可以通过 DOM API 操作网页元素。
  - 事件处理：通过事件监听器响应用户交互。
  -->
</head>

<body>
  <script>
    alert("Hello World");
    confirm("你确定要删除吗？");
    prompt("请输入你的名字：");

    console.log("log - Hello World!");

    console.error("error 这是一个错误信息。");

    console.warn("warn 这是一个警告信息。");

    console.table([
      { name: "Alice", age: 25 },
      { name: "Bob", age: 30 },
    ]);

    console.group("group 用户信息");
    console.log("姓名：Alice");
    console.log("年龄：25");
    console.groupEnd();

    console.time("time 计时器");

    console.timeEnd("timeEnd 计时器");

    // console.clear();

    console.assert(false, "assert 这是一个断言错误。");

    console.count("count 计数器");

    console.dir("dir", document.body);

    console.dirxml("dirxml", document.body);

    console.trace();

    console.profile("profile 性能分析器");

    console.profileEnd("profileEnd 性能分析器");

    console.timeLog("timeLog 计时器");

    document.write("write Hello World!");

    document.writeln("writeln Hello World!");
  </script>
</body>

</html>